<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>路径图-中国主干</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="echarts" src="./static/libs/include-cesium-local.js"></script>
  <!--当前示例页面样式表引用-->
  <link rel="stylesheet" href="./static/demo/cesium/style.css" />
</head>

<body>
  <div id="GlobeView"></div>
  <script>
    var webGlobe, map;

    initMap();
    initEcharts();

    function initMap() {
      webGlobe = new Cesium.WebSceneControl("GlobeView", {
        terrainExaggeration: 1,
      });
      //显示鼠标位置控件
      webGlobe.showPosition("coordinate_location");
      map = webGlobe.viewer;
      var blueImage = new Cesium.UrlTemplateImageryProvider({
        url:
          "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        maximumLevel: 8,
      });
      webGlobe.viewer.imageryLayers.addImageryProvider(blueImage);
      var center = Cesium.Cartesian3.fromDegrees(114, 30, 5000000.0);
      map.scene.camera.setView({
        destination: center,
      });
    }

    initEcharts();

    var CHUNK_COUNT = 28; // 数据一共28片
    var dataCount = 0;
    var layer;
    /**
     * 循环请求对应的网络数据，数据格式是Int32Array,并解析对应的二级制流
     * */
    function fetchData(idx) {
      if (idx >= CHUNK_COUNT) {
        return;
      }
      var dataURL = `./static/data/echarts/road/road_${idx}.bin`;
      var xhr = new XMLHttpRequest();
      xhr.open("GET", dataURL, true);
      xhr.responseType = "arraybuffer";

      xhr.onload = function (e) {
        var rawData = new Float32Array(this.response);

        var addedDataCount = 0;

        layer.chart.appendData({
          seriesIndex: 0,
          data: rawData,
        });

        dataCount += addedDataCount;

        fetchData(idx + 1);
      };

      xhr.send();
    }

    function initEcharts() {
      // options参数请参考百度echarts-options
      // https://echarts.apache.org/zh/option.html#title
      var option = {
        title: {
          text: "全国道路（百万级）",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        progressive: 5000, // 一次渲染5000点
        cesium: {
          roam: true,
        },
        series: [
          {
            type: "lines",

            coordinateSystem: "cesium", // 设置cesium坐标系

            blendMode: "lighter",

            dimensions: ["value"],

            data: new Float64Array(), // 关键点： 数据必须处理成Float64Array格式，否则超出浏览器内存
            polyline: true,
            large: true,

            lineStyle: {
              color: "blue",
              width: 1.0,
              opacity: 0.9,
            },
          },
        ],
      };
      // 声明cesium的echarts图层并将其显示到三维球上
      layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map);

      fetchData(0);
    }
  </script>
</body>

</html>